<template>
  <transition name="v-sku">
    <div
      class="v-modal-mask v-modal-shade"
      @touchmove.prevent
      @click="close"
      v-if="currentValue"
    >
      <div class="v-sku-container">
        <icon name="close" wrapperClass="sku-close-icon" />
        <input v-model="currentValue" class="hide" />
        <header class="v-sku-header">
          <img
            v-if="skuList.length"
            :src="skuBindData.skuHashMap[currentHashKey].imageUrl"
            class="v-sku-img"
          />
          <p>First Order Prize</p>
          <h3>{{skuBindData.skuHashMap[currentHashKey].couponPrice}}</h3>
        </header>
        <div class="v-price-wrapper">
          <h3>{{skuBindData.skuHashMap[currentHashKey].discountPrice}}</h3>
          <p>{{currentPrimaryName}} {{currentSecondaryName}}
            <span>Stock : {{skuBindData.skuHashMap[currentHashKey].stockTotal}}</span>
          </p>
        </div>
        <div class="v-sku-scroll" @touchmove.stop>
          <div class="v-picker">
            <label>{{skuBindData.primaryTitle}}</label>
            <button
              class="v-button v-sku-button"
              v-for="item in skuBindData.primaryValues"
              @click="primaryChangeHandler(item)"
              :class="{ 'selected': currentPrimaryName === item }"
            >
              {{item}}
            </button>
          </div>
          <div class="v-picker" v-if="skuBindData.secondaryValues.length">
            <label>{{skuBindData.secondaryTitle}}</label>
            <button
              class="v-button v-sku-button"
              v-for="item in skuBindData.secondaryValues"
              @click="secondaryChangeHandler(item)"
              :class="{
                'selected': currentSecondaryName === item,
              }"
            >
              {{item}}
            </button>
          </div>
          <div class="v-picker">
            <label>Number</label>
            <div class="v-number">
              <v-number
                v-model="skuNumber"
                :min="1"
                :max="skuBindData.skuHashMap[currentHashKey].stockTotal * 1"
                :goodsId="goodsId"
                :goodsTitle="goodsTitle"
              />
            </div>
          </div>
        </div>
        <v-button
          type="danger"
          @click="submit"
          v-if="skuBindData.skuHashMap[currentHashKey].stockTotal > 0"
          v-analytics.click="{
            action: 'Add to Cart',
            category: 'Detail Page',
            label: goodsId + ' '+ goodsTitle,
          }"
          className="sku-bottomBtn"
        >
          Submit
        </v-button>
        <v-button type="danger" disabled v-else className="sku-bottomBtn">
          Sold out
        </v-button>
      </div>
    </div>
  </transition>
</template>
<script>
import number from '../number'
import button from '../button'
import icon from '../icon'

export default {
  name: 'skuPicker',
  props: {
    value: Boolean,
    skuList: {
      type: Array,
      default: () => [],
    },
    goodsId: String,
    goodsTitle: String,
  },
  components: {
    vNumber: number,
    vButton: button,
    icon,
  },
  data() {
    return {
      currentValue: this.value,
      skuBindData: {
        primaryValues: [],
        secondaryValues: [],
        skuHashMap: {},
        primaryTitle: '',
        secondaryTitle: '',
      },
      currentPrimaryName: '',
      currentSecondaryName: '',
      currentHashKey: '',
      skuNumber: 1,
    }
  },
  watch: {
    value(val) {
      this.currentValue = val
    },
    currentValue(val) {
      this.$emit('input', val)
    },
    skuList(val) {
      if (val.length) {
        this.skuBindData = this.createList(val)
      }
    },
  },
  methods: {
    submit() {
      this.$emit('on-submit', {
        skuId: this.skuBindData.skuHashMap[this.currentHashKey].skuId,
        number: this.skuNumber,
      })
    },
    close(e) {
      if (e.target === e.currentTarget) {
        this.currentValue = false
      }
    },
    primaryChangeHandler(primaryName) {
      this.currentPrimaryName = primaryName
      this.currentHashKey = `${primaryName}-${this.currentSecondaryName}`
    },
    secondaryChangeHandler(secondaryName) {
      this.currentSecondaryName = secondaryName
      this.currentHashKey = `${this.currentPrimaryName}-${secondaryName}`
    },
    createList(skuList) {
      const primary = new Set()
      const secondary = new Set()
      const skuHashMap = {}

      for (let i = 0, l = skuList.length; i < l; i += 1) {
        const item = skuList[i]
        const primaryValue = item.primaryValue
        const secondaryValue = item.secondaryValue

        primary.add(primaryValue)
        if (secondaryValue) {
          secondary.add(secondaryValue)
        }
        skuHashMap[`${primaryValue}-${secondaryValue}`] = item

        // 设置默认值
        if (item.stockTotal > 0 && !this.currentHashKey) {
          this.currentPrimaryName = item.primaryValue
          this.currentSecondaryName = item.secondaryValue
          this.currentHashKey = `${item.primaryValue}-${item.secondaryValue}`
        }
      }

      /**
       * primaryValues: 主属性数组
       * secondaryValues: 副属性数组
       * skuHashMap: 主副属性哈希结构
       * primaryTitle: 主属性标题
       * secondaryTitle: 副属性标题
       */
      return {
        primaryValues: Array.from(primary),
        secondaryValues: Array.from(secondary),
        skuHashMap,
        primaryTitle: skuList[0].primaryTitle,
        secondaryTitle: skuList[0].secondaryTitle,
      }
    },
  },
}
</script>

<style lang="scss">
.v-sku-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  transition: all .3s ease;
  z-index: 3000;
  padding-bottom: 48px;
  .sku-bottomBtn {
    position: fixed;
    bottom: 0;
  }
}

.v-sku-scroll {
  overflow-y: auto;
  max-height: 280px;
  -webkit-overflow-scrolling: touch;
}

.v-sku-header {
  position: relative;
  height: 56px;
  background-image: url("~assets/goodsInfo/banner.png");
  background-size: 100% 100%;
  padding-left: 126px;
  padding-top: 9px;
  color: #fff;
  font-size: 12px;
  h3 {
    font-size: 20px;
    line-height: 24px;
    padding-top: 2px;
    color: #fff;
  }
}

.v-price-wrapper {
  height: 56px;
  padding: 9px 0 9px 126px;
  border-bottom: 1px solid #E7E7E7;
  h3 {
    font-size: 20px;
    line-height: 24px;
    padding-top: 2px;
  }
  p {
    font-size: 12px;
  }
  span {
    float: right;
    color: #9B9B9B;
    padding-right: 12px;
  }
}

.v-sku-img {
  display: block;
  width: 102px;
  height: 102px;
  position: absolute;
  left: 12px;
  top: -12px;
  background: #fff;
  box-shadow: 0 0 2px 0 rgba(0,0,0,0.12), 0 2px 2px 0 rgba(0,0,0,0.24);
}

.sku-close-icon {
  position: absolute;
  right: 12px;
  top: -30px;
  color: #fff;
}

.v-picker {
  padding: 12px;
  border-bottom: 1px solid #E7E7E7;
  label {
    display: block;
    color: #9B9B9B;
    font-size: 12px;
  }
  .v-sku-button {
    border: 1px solid #4A4A4A;
    height: 40px;
    display: inline-block;
    width: auto;
    min-width: 94px;
    margin-top: 12px;
    margin-right: 12px;
    padding: 0 12px;
    &.selected {
      background-color: #FF464E;
      border-color: #FF464E;
      color: #fff;
    }
    // &.disabled {
    //   border-color: #DCDCDC;
    //   color: #DCDCDC;
    //   pointer-events: none;
    //   vertical-align: top;
    //   padding: 0;
    //   p {
    //     &:first-child {
    //       line-height: 26px;
    //       padding: 0 12px;
    //     }
    //     &:last-child {
    //       height: 14px;
    //       font-size: 10px;
    //       background-color: #DCDCDC;
    //       color: #fff;
    //     }
    //   }
    // }
  }
}

.v-number {
  padding-top: 12px;
  & > .count {
    margin-left: auto;
    margin-right: auto;
  }
}

.v-sku-enter {
  opacity: 0;
}

.v-sku-leave-active {
  opacity: 0;
}

.v-sku-enter .v-sku-container {
  transform: translateY(100%);
}

.v-sku-leave-active .v-sku-container {
  transform: translateY(100%);
}
</style>
